<template>
  <div class="app-container">
    <!-- 全局侧边功能栏 -->
    <div class="global-floating-sidebar" :class="{ 'collapsed': sidebarCollapsed }">
      <div class="sidebar-indicator" v-if="sidebarCollapsed" @click="toggleSidebar">
        <span>&gt;</span>
      </div>
      <div class="floating-item upgrade-vip" @click="handleUpgrade" title="升级会员">
        <div class="icon-container">
          <svg class="diamond-icon" width="24" height="24" viewBox="0 0 36 36" fill="none">
            <path d="M18 36C8.06 36 0 27.94 0 18S8.06 0 18 0s18 8.06 18 18-8.06 18-18 18z" fill="url(#svg_4d9dd5e498__paint0_linear_0:675)"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.249 27.637a1 1 0 001.54 0l8.983-10.864a1 1 0 00.098-1.131l-2.92-5.135a1 1 0 00-.87-.506L11.91 10a1 1 0 00-.869.505l-2.91 5.106a1 1 0 00.099 1.133l9.019 10.893zM15.147 15.14a.5.5 0 00-.5.5v1.056a.5.5 0 00.5.5h5.93a.5.5 0 00.5-.5v-1.056a.5.5 0 00-.5-.5h-5.93z" fill="#fff"/>
            <defs>
              <linearGradient id="svg_4d9dd5e498__paint0_linear_0:675" x1="-5.738" y1="22.198" x2="20.956" y2="43.522" gradientUnits="userSpaceOnUse">
                <stop stop-color="#1890FF"/>
                <stop offset="1" stop-color="#0c7ddb"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <span>升级会员</span>
      </div>
      <div class="floating-item customer-service" @mouseenter="showQrcode = true" @mouseleave="showQrcode = false" title="联系客服">
        <div class="icon-container">
          <svg class="service-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path fill="#fff" fill-opacity=".01" d="M0 0h24v24H0z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 11.114c0 4.484 3.835 8.114 8.558 8.114h.315v.888c0 .438.159.862.45 1.2.69.802 1.929.915 2.765.252l.526-.419c2.656-2.124 4.454-3.737 5.453-4.898A7.83 7.83 0 0022 11.114C22 6.63 18.166 3 13.442 3h-2.884C5.835 3 2 6.63 2 11.114zM12.96 20v-1.289c0-.762-.646-1.38-1.442-1.38h-.975C6.928 17.332 4 14.569 4 11.167 4 7.763 6.927 5 10.543 5h2.914C17.073 5 20 7.763 20 11.166c0 1.43-.519 2.796-1.471 3.895-.863 1.001-2.476 2.454-4.856 4.37L12.96 20z" fill="#1890FF"/>
          </svg>
        </div>
        <span>联系客服</span>
        <div class="qrcode-popup" v-show="showQrcode">
          <img src="../images/2.png" alt="客服二维码" class="qrcode-popup-img" />
        </div>
      </div>
      <div class="floating-item close-sidebar" @click="toggleSidebar" title="收起侧边栏">
        <div class="icon-container">
          <svg class="close-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="#999"/>
          </svg>
        </div>
        <span>{{ sidebarCollapsed ? '展开' : '收起' }}</span>
      </div>
    </div>
    
    <router-view v-slot="{ Component, route }">
      <keep-alive :include="cachedComponents">
        <component :is="Component" :key="route.fullPath" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { useRouter } from 'vue-router';
import { LANGUAGES, getCurrentLanguage } from '@/utils/i18n';

export default {
  name: 'App',
  
  setup() {
    const router = useRouter();
    const sidebarCollapsed = ref(false);
    const showQrcode = ref(false);
    
    // 需要缓存的组件列表
    const cachedComponents = computed(() => {
      return ['Dashboard']; // 将工作台组件添加到缓存列表
    });
    
    // 初始化语言设置
    const initializeLanguage = () => {
      const storedLang = localStorage.getItem('APP_LANGUAGE');
      
      // 如果语言设置不存在或无效，设置为中文
      if (!storedLang || ![LANGUAGES.ZH, LANGUAGES.EN].includes(storedLang)) {
        localStorage.setItem('APP_LANGUAGE', LANGUAGES.ZH);
        document.documentElement.setAttribute('lang', LANGUAGES.ZH);
        document.title = '数海领航外贸系统';
      } else {
        // 更新HTML lang属性
        document.documentElement.setAttribute('lang', storedLang);
        document.title = storedLang === LANGUAGES.EN ? 'Data Platform' : '数海领航外贸系统';
      }
    };
    
    // 处理升级会员
    const handleUpgrade = () => {
      router.push('/personal-center?tab=memberCenter');
    };
    
    // 切换侧边栏
    const toggleSidebar = () => {
      sidebarCollapsed.value = !sidebarCollapsed.value;
      // 保存状态到本地存储，以便在页面刷新后保持一致
      localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value);
    };
    
    // 处理语言变化事件
    const handleLanguageChange = (event) => {
      if (event.detail && event.detail.lang) {
        const lang = event.detail.lang;
        
        // 更新HTML属性和标题
        document.documentElement.setAttribute('lang', lang);
        document.title = lang === LANGUAGES.EN ? 'Data Platform' : '数海领航外贸系统';
        
      }
    };
    
    // 页面刷新前保存当前路径
    const handleBeforeUnload = () => {
      // 排除根路径和静态资源路径
      const currentPath = router.currentRoute.value.path;
      if (currentPath !== '/' && !currentPath.includes('/assets/')) {
        sessionStorage.setItem('redirect_after_reload', currentPath);
      }
    };
    
    onMounted(() => {
      // 初始化语言设置
      initializeLanguage();
      
      // 从本地存储恢复侧边栏状态
      const savedSidebarState = localStorage.getItem('sidebarCollapsed');
      if (savedSidebarState !== null) {
        sidebarCollapsed.value = savedSidebarState === 'true';
      }
      
      // 监听语言变化事件
      document.addEventListener('language-changed', handleLanguageChange);
      
      // 添加页面刷新事件监听
      window.addEventListener('beforeunload', handleBeforeUnload);
    });
    
    onBeforeUnmount(() => {
      // 移除事件监听器
      document.removeEventListener('language-changed', handleLanguageChange);
      window.removeEventListener('beforeunload', handleBeforeUnload);
    });
    
    return {
      sidebarCollapsed,
      showQrcode,
      toggleSidebar,
      handleUpgrade,
      cachedComponents
    };
  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

#app {
  height: 100%;
}

.app-container {
  height: 100vh;
  width: 100vw;
}

/* 全局侧边功能栏样式 */
.global-floating-sidebar {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999; /* 确保显示在最上层 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  gap: 10px;
}

.global-floating-sidebar.collapsed {
  transform: translateY(-50%) translateX(calc(100% + 20px));
}

.floating-item {
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 10px;
  position: relative;
  text-align: center;
  font-size: 12px;
  color: #333;
  transition: background-color 0.3s;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.floating-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.upgrade-vip {
  background-color: transparent;
  position: relative;
  color: #333;
}

.upgrade-vip:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.icon-container {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diamond-icon, .service-icon, .close-icon {
  width: 100%;
  height: 100%;
}

.customer-service {
  background-color: transparent;
  position: relative;
  color: #333;
}

.customer-service:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.qrcode-popup {
  position: absolute;
  left: -170px;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 10000;
}

.qrcode-popup:after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.qrcode-popup-img {
  width: 150px;
  height: 150px;
}

.close-sidebar {
  background-color: transparent;
  position: relative;
  color: #333;
}

.close-sidebar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 侧边栏收起时的指示器 */
.sidebar-indicator {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 60px;
  background-color: #1890FF;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 16px;
}
</style> 